<template>
  <div class="wrapper">
    <ul class="content">
      <li>li 1</li>
      <li>li 2</li>
      <li>li 3</li>
      <li>li 4</li>
      <li>li 5</li>
      <li>li 6</li>
      <li>li 7</li>
      <li>li 8</li>
      <li>li 9</li>
      <li>li 10</li>
      <li>li 11</li>
      <li>li 12</li>
      <li>li 13</li>
      <li>li 14</li>
      <li>li 15</li>
      <li>li 16</li>
      <li>li 17</li>
      <li>li 18</li>
      <li>li 19</li>
      <li>li 20</li>
      <li>li 21</li>
      <li>li 22</li>
      <li>li 23</li>
      <li>li 24</li>
      <li>li 25</li>
      <li>li 26</li>
      <li>li 27</li>
      <li>li 28</li>
      <li>li 29</li>
      <li>li 30</li>
      <li>li 31</li>
      <li>li 32</li>
      <li>li 33</li>
      <li>li 34</li>
      <li>li 35</li>
      <li>li 36</li>
      <li>li 37</li>
      <li>li 38</li>
      <li>li 39</li>
      <li>li 40</li>
      <li>li 41</li>
      <li>li 42</li>
      <li>li 43</li>
      <li>li 44</li>
      <li>li 45</li>
      <li>li 46</li>
      <li>li 47</li>
      <li>li 48</li>
      <li>li 49</li>
      <li>li 50</li>
    </ul>
  </div>
</template>

<script>
  import BScroll from "better-scroll"
  // import PullDown from '@better-scroll/pull-down'

  // BScroll.use(PullDown)

  export default {
    name: "Category",
    data() {
      return {
        scroll: null
      }
    },
    created() {
      
    },
    mounted() {
      console.log(document.querySelector(".wrapper"));
      this.scroll = new BScroll(document.querySelector(".wrapper"), {
        probeType: 3,
        // pullDownRefresh: true,
        pullUpLoad: true    //这里使用了错误，导致上拉组件pullingUp无法刷新。
      })
      this.scroll.on("scroll", option => {
        // console.log(option);
      })
      this.scroll.on("pullingUp", () => {
        console.log("上拉加载更多");
      })
    },
  }

</script>

<style scoped>
  .wrapper{
    height: 150px;
    background-color: red;
  }
</style>